<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>计算属性</title>
</head>

<body>
    <div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    //当 computeed 和 methods 能实现同一个功能的时候，推荐使用 computed , 因为计算机属性有缓存
    //当 computeed 和 watch 能实现同一个功能的时候，推荐使用 computed，因为计算机属性更简洁。
    const vm = Vue.createApp({
        data() {
            return {
                counts: 5,
                prices: 10,
                message: '总价',
                watchTotalPrices: ''
            }
        },
        computed: {
            //只有属性依赖的数据发生变化以后才会执行
            total() {
                console.log('总价发生变化！')
                return Date.now () + '-->' + this.counts * this.prices + '元';
            }
        },
        methods: {
            //当页面渲染的时候，就会重新计算
            getTotal() {
                console.log('getTotal = 总价发生变化！')
                return this.message + Date.now () + '--> ' + this.counts * this.prices + '元';
            }
        },
        template: `<div> 数量：{{counts}} 个，价格：{{prices}} 元</div>   
               <div>总价： {{counts * prices}}     </div>
               <div>总价： {{total}}</div>
               <div>getTotal() {{getTotal()}} 元 </div>
               <div>watchTotalPrices {{watchTotalPrices}}</div>
               `,  // <div>总价： {{counts * prices}}     </div>=====<div> 总价： {{total}}</div> 调用total
               watch: {
                   prices(){
                       console.log("watch --> 价格已发生变化：");
                       this.watchTotalPrices = this.counts * this.prices + '元';
                   },
                   counts(){
                    console.log("watch --> 价格已发生变化：");
                    this.watchTotalPrices = this.counts * this.prices + '元';
                   }
               }
    }).mount("#app");
</script>

</html>